<template>
  <div>
    <van-nav-bar title="标题" left-arrow @click-left="onClickLeft" />
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field v-model="loginname" name="loginname" label="用户名" placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]" />
        <van-field v-model="password" type="password" name="password" label="密码" placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]" />
      </van-cell-group>
      <div style="margin: 16px;">
        <van-button round block type="primary" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>
    <p class="reg" @click="goReg">手机快速注册</p>
  </div>
</template>

<script setup lang="ts">
// 登录失败弹出提示
import {  showFailToast } from 'vant';
// 结构登录接口
import { userLoginAPI } from "../../api/goods"
// 在 setup 中访问路由和当前路由
// 因为我们在 setup 里面没有访问 this，
// 所以我们不能再直接访问 this.$router 或 this.$route。
// 作为替代，我们使用 useRouter 和 useRoute 函数：
import { ref } from "vue"
// 需要从当前路由结构出来
import { useRouter } from "vue-router";
// 用户登录的账号
let loginname = ref<string>('')
let password = ref<string>('')
// 使用useRouter函数得到当前的路由对象
let $router = useRouter();
const onClickLeft = () => {
  $router.go(-1);
}
function onSubmit(value: any) {
  userLoginAPI({...value}).then((res)=>{
console.log(res);
if(res.data.code == 200){
  // 存储token
  localStorage.setItem("app-token",res.data.data.token)
  localStorage.setItem("app-userid",res.data.data.userid)
  // 登录成功 利用路由返回上一个页面
  $router.back()
}else{
  showFailToast({  message: res.data.message });
}

  })
}
// 点击跳转到注册页面
const goReg = ()=>{
  $router.push("/reg")
}
</script>

<style scoped>
.reg {
  padding-right: 20px;
  text-align: right;
  color: pink;
}</style>
